<input type="checkbox">

Ein String, der den Wert des Kontrollkästchens darstellt. Dieser wird nicht auf der Client-Seite angezeigt, sondern auf dem Server ist dies der value, der mit dem name des Kontrollkästchens bei der Datenübermittlung übergeben wird. Nehmen wir folgendes Beispiel:

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

In diesem Beispiel haben wir einen Namen subscribe und einen Wert newsletter. Wenn das Formular übermittelt wird, ist das Datenname/Wert-Paar subscribe=newsletter.

Wenn das value-Attribut weggelassen wird, ist der Standardwert für das Kontrollkästchen on, sodass die übermittelten Daten in diesem Fall subscribe=on wären.

Zusätzlich zu den allgemeinen Attributen, die alle <input>-Elemente teilen, unterstützen checkbox-Inputs die folgenden Attribute.

checked

Ein boolean-Attribut, das angibt, ob dieses Kontrollkästchen standardmäßig aktiviert ist (beim Laden der Seite). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit aktiviert ist: Wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked IDL-Attribut des HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert eines Kontrollkästchens nur dann in den übermittelten Daten einbezogen, wenn das Kontrollkästchen derzeit checked ist. Wenn dies der Fall ist, wird der dem Kontrollkästchen zugewiesene Wert des value-Attributs als Wert der Eingabe gemeldet, oder on, wenn kein value festgelegt ist. Anders als andere Browser behält Firefox standardmäßig den dynamischen aktivierten Zustand eines <input> über Seitenladevorgänge hinweg bei. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, das alle <input> gemeinsam haben; jedoch erfüllt es eine besondere Funktion für Eingaben vom Typ checkbox: Wenn ein Formular übermittelt wird, werden nur Kontrollkästchen, die derzeit aktiviert sind, an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Wenn value nicht anders angegeben ist, ist es standardmäßig der String on. Dies wird im Abschnitt Wert oben demonstriert.

Die einfachste Verwendung von Kontrollkästchen haben wir oben bereits behandelt. Schauen wir uns nun die anderen gängigen, kontrollkästchenbezogenen Funktionen und Techniken an, die Sie benötigen werden.

Das Beispiel, das wir oben gesehen haben, enthält nur ein Kontrollkästchen; in realen Situationen werden Sie wahrscheinlich mehrere Kontrollkästchen vorfinden. Wenn sie völlig unabhängig sind, können Sie alle separat behandeln, wie oben gezeigt. Wenn sie jedoch alle miteinander verbunden sind, ist die Sache nicht ganz so einfach.

Beispielsweise enthalten wir im folgenden Demo mehrere Kontrollkästchen, um dem Benutzer die Auswahl seiner Interessen zu ermöglichen (siehe die vollständige Version im Abschnitt Beispiele).

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

In diesem Beispiel sehen Sie, dass wir jedem Kontrollkästchen denselben name gegeben haben. Wenn beide Kontrollkästchen aktiviert und das Formular dann abgesendet wird, erhalten Sie eine Zeichenfolge von Namen/Wert-Paaren wie folgt: interest=coding&interest=music. Wenn diese Zeichenfolge den Server erreicht, müssen Sie sie anders als als assoziatives Array parsen, sodass alle, nicht nur der letzte Wert, von interest erfasst werden. Eine mit Python verwendete Technik finden Sie beispielsweise unter Handle Multiple Checkboxes with a Single Serverside Variable.

Um ein Kontrollkästchen von vornherein aktiviert zu haben, geben Sie ihm das checked-Attribut. Sehen Sie das folgende Beispiel:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

In den obigen Beispielen haben Sie möglicherweise bemerkt, dass Sie ein Kontrollkästchen durch Klicken auf das zugehörige <label>-Element sowie auf das Kontrollkästchen selbst umschalten können. Dies ist eine wirklich nützliche Funktion von HTML-Formularlabels, die es einfacher macht, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinen Bildschirmen wie Smartphones.

Über die Zugänglichkeit hinaus ist dies ein weiterer guter Grund, <label>-Elemente korrekt in Ihren Formularen zu konfigurieren.

Ein Kontrollkästchen kann sich im indeterminierten Zustand befinden. Dieser wird über die HTMLInputElement-Objekteigenschaft indeterminate mithilfe von JavaScript gesetzt (es kann nicht mit einem HTML-Attribut gesetzt werden):

inputInstance.indeterminate = true;

Wenn indeterminate true ist, hat das Kontrollkästchen in den meisten Browsern eine horizontale Linie im Kästchen (es sieht etwas wie ein Bindestrich oder Minuszeichen aus), anstelle eines Häkchens.

Es gibt nicht viele Anwendungsfälle für diese Eigenschaft. Der häufigste ist, wenn ein Kontrollkästchen verfügbar ist, das "Besitzer" einer Vielzahl von Unteroptionen ist (die ebenfalls Kontrollkästchen sind). Wenn alle Unteroptionen aktiviert sind, ist auch das besitzende Kontrollkästchen aktiviert, und wenn sie alle deaktiviert sind, ist das besitzende Kontrollkästchen deaktiviert. Wenn eine oder mehrere der Unteroptionen einen anderen Zustand als die anderen haben, befindet sich das besitzende Kontrollkästchen im indeterminierten Zustand.

Dies kann im folgenden Beispiel gesehen werden (danke an CSS Tricks für die Inspiration). In diesem Beispiel verfolgen wir die Zutaten, die wir für ein Rezept sammeln. Wenn Sie das Kontrollkästchen einer Zutat aktivieren oder deaktivieren, überprüft eine JavaScript-Funktion die Gesamtzahl der aktivierten Zutaten:

• Wenn keine aktiviert sind, wird das Kontrollkästchen des Rezeptnamens deaktiviert.
• Wenn ein oder zwei aktiviert sind, wird das Kontrollkästchen des Rezeptnamens auf indeterminate gesetzt.
• Wenn alle drei aktiviert sind, wird das Kontrollkästchen des Rezeptnamens auf checked gesetzt.

In diesem Fall wird der indeterminate-Zustand verwendet, um anzugeben, dass das Sammeln der Zutaten begonnen hat, das Rezept jedoch noch nicht vollständig ist.

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Kontrollkästchen unterstützen Validierung (angeboten für alle <input>). Die meisten der ValidityStates sind jedoch immer false. Wenn das Kontrollkästchen das required Attribut hat, aber nicht aktiviert ist, dann wird ValidityState.valueMissing true sein.

Das folgende Beispiel ist eine erweiterte Version des "mehrere Kontrollkästchen"-Beispiels, das wir oben gesehen haben — es hat mehr Standardoptionen sowie ein "anderes" Kontrollkästchen, das ein Textfeld erscheinen lässt, um einen Wert für die "andere" Option einzugeben, wenn es aktiviert ist. Dies wird mit einem kurzen JavaScript-Block erreicht. Das Beispiel enthält implizite Labels, mit dem <input> direkt innerhalb des <label>. Das Texteingabefeld, ohne sichtbares Label, enthält das aria-label-Attribut, das seinen zugänglichen Namen bereitstellt. Dieses Beispiel enthält auch etwas CSS zur Verbesserung der Gestaltung.

• :checked, :indeterminate: CSS-Selektoren, die es ermöglichen, Kontrollkästchen basierend auf ihrem aktuellen Zustand zu gestalten
• HTMLInputElement: HTML DOM API, das das <input>-Element implementiert